<template>
  <div class="">
    <el-dialog class="dialogTop" :visible.sync="visible" width="950px" :close-on-click-modal="false"
               :modal="true" append-to-body :before-close="handleClose">
      <template slot="title">
        <div class="title-text">
          <span class="title-main">添加图片</span><span class="title-supplement">（只能添加jpg,jpeg,bmp,png,gif,大小不超过5M。）</span>
        </div>
      </template>
      <div class="tabs-card">
        <el-tabs v-model="activeName" type="card" tabPosition="left" class="material" style="height: 500px">
          <el-tab-pane label="我的文件" name="first">
            <el-container>
              <el-header class="container-header" height="10px">
                <el-row :gutter="0" type="flex" justify="space-between">
                  <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                    <el-row type="flex" justify="space-between">
                      <el-col v-hasPermi="['system:material:add']">
                        <el-upload
                          ref="upload"
                          :limit="5"
                          accept=".jpg, .jpeg, .bmp, .png, .gif"
                          :action="upload.url"
                          :headers="upload.headers"
                          :file-list="upload.fileList"
                          :data="{'folderId':form.folderId}"
                          :before-upload="beforeUpload"
                          :on-progress="handleFileUploadProgress"
                          :on-success="handleFileSuccess"
                          :on-error="handleFileError"
                          :show-file-list="false">
                          <el-button slot="trigger" size="medium" icon="el-icon-upload2" :loading="upload.isUploading">
                            直接上传
                          </el-button>
                        </el-upload>
                      </el-col>
                      <el-col v-hasPermi="['system:material:add']">
                        <el-button class="hidden-xs-only" size="medium" icon="el-icon-folder-add"
                                   @click="handleAddFolder"
                                   :loading="upload.isUploading">新增文件夹</el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" :pull="2">
                    <el-input placeholder="搜索所有文件" v-model="form.folderName" class="header-search" @change="searchChange">
                      <i :class="search.searchVisible?'el-icon-search el-input__icon':'el-icon-error el-input__icon'"
                         slot="suffix" @click="searchIconClick"/>
                    </el-input>
                  </el-col>
                </el-row>
              </el-header>
              <el-main class="container-main">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="div-breadcrumb">
                  <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index" v-if="breadcrumbList.length>1">
                    <span :style="index<breadcrumbList.length-1?item.cssStyle:null"
                          :class="index<breadcrumbList.length-1?'breadcrumb-item':null"
                          @mouseenter="item.cssStyle='cursor: pointer;'"
                          @mouseleave="item.cssStyle=''"
                          @click="breadcrumbJump(item,index)">{{ item.folderName }}</span></el-breadcrumb-item>
                </el-breadcrumb>
                <el-scrollbar style="height: 425px;" :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle=""
                              :noresize="false" tag="section">
                  <el-row>
                    <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" v-for="(item,index) in materialFolder.children" :key="index">
                      <div class="material-div">
                        <div class="image-div" @mouseenter="item.hiddenVisible=true"
                             @mouseleave="item.hiddenVisible=false">
                          <el-image
                            :class="item.hiddenVisible===true?'folder-style image-hand':'folder-style'"
                            :src="upload.folderImg"
                            fit="contain" @click="breadcrumbJump(item,index)">
                          </el-image>
                          <svg-icon slot="prefix" icon-class="xy-cancel"
                                    :class="item.hiddenVisible?'folder-cancel image-hand':'folder-cancel'"
                                    v-if="item.hiddenVisible" @click="imageDelete(0,item,index)"
                                    v-hasPermi="['system:material:remove']"/>
                        </div>
                        <div class="image-box">
                          <el-input
                            class="image-input"
                            v-model="item.folderName"
                            @change="updateMaterialNick(0, item, index)"
                            ref="ImageNickInput"
                            size="mini">
                          </el-input>
                        </div>
                      </div>
                    </el-col>
                    <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3"
                            v-for="(item,index) in materialFolder.materialList" :key="index">
                      <div class="material-div">
                        <div class="image-div" @mouseenter="item.hiddenVisible=true"
                             @mouseleave="item.hiddenVisible=false">
                          <div @click="imageChoiceClick(item,index)">
                            <el-image
                              :class="item.imageChoice===true?'image-style image-border image-hand':item.hiddenVisible===true?'image-style image-border image-hand':'image-style'"
                              :src="getImgPreviewUrl(item.materialUrl)"
                              fit="contain">
                            </el-image>
                            <svg-icon slot="prefix" icon-class="xy-choice2" class="image-choice"
                                      v-if="item.imageChoice"/>
                          </div>
                          <svg-icon slot="prefix" icon-class="xy-cancel"
                                    :class="item.hiddenVisible?'image-cancel image-hand':'image-cancel'"
                                    v-if="item.hiddenVisible" @click="imageDelete(1, item, index)"
                                    v-hasPermi="['system:material:remove']"/>
                        </div>
                        <div class="image-box">
                          <el-input
                            class="image-input"
                            v-model="item.materialNick"
                            @change="updateMaterialNick(1, item, index)"
                            ref="ImageNickInput"
                            size="mini">
                          </el-input>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-scrollbar>
              </el-main>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="图库中心" name="second"></el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer dialogTop-footer">
        <el-button class="dialogTop-footer-button" @click="handleClose">取 消</el-button>
        <el-button class="dialogTop-footer-button" type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog class="minor-dialogTop" :visible.sync="visible" width="149px" :close-on-click-modal="false"
               :show-close="false" :modal="false" v-if="max>1" append-to-body>
      <template slot="title">
        <div class="minor-title-text">
          <span class="minor-increase">待添加({{ choiceList.length }}/{{ max }})</span>
        </div>
      </template>
      <div class="tabs-card minor-panel">
        <el-scrollbar style="height: 500px;" :native="false" wrapStyle="" wrapClass="" viewClass=""
                      viewStyle="" :noresize="false" tag="section">
          <div style="margin-bottom: 10px;"/>
          <draggable
            :list="choiceList"
            v-bind="$attrs"
            animation="300">
            <div class="choice-div" v-for="(item,index) in choiceList">
              <div class="choice-image-div" @mouseenter="item.hiddenVisible=true"
                   @mouseleave="item.hiddenVisible=false">
                <el-image
                  :class="item.hiddenVisible===true?'choice-image-style choice-image-border choice-image-hand':'choice-image-style'"
                  :src="item.materialUrl"
                  fit="contain"/>
                <svg-icon slot="prefix" icon-class="xy-cancel"
                          :class="item.hiddenVisible?'choice-image-cancel choice-image-hand':'choice-image-cancel'"
                          v-if="item.hiddenVisible" @click="imageDeselectClick(item,index)"/>
              </div>
            </div>
          </draggable>
          <div style="margin-top: 10px;"/>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer minor-dialog-footer">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listMaterial,
    addFolder,
    delFolder,
    delMaterial,
    parentFolder,
    updateFolder,
    updateMaterial
  } from "../../api/file/material";
  import {getToken} from "../../utils/auth";
  import folderImg from '../../assets/images/wg-folder.png'
  import '~../../element-ui/lib/theme-chalk/display.css';
  import draggable from '~../../vuedraggable';

  export default {
    name: "Material",
    components: {draggable},
    model: {
      prop: 'list',
      event: 'change'
    },
    props: {
      /** dialog显隐参数 */
      visible: {
        type: Boolean,
        default: false
      },
      /** 传入list参数 */
      list: {
        type: Array,
        default: function () {
          return []
        }
      },
      /** 图片上传最大数量参数 默认为 1 */
      max: {
        type: Number,
        default: 1
      },
      /** 传入list是否转空参数 默认为 false */
      clear: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        //活跃单元
        activeName: "first",
        //list接收转换参数
        imageList: [],
        // 上传参数
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: {Authorization: "Bearer " + getToken()},
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/file/material/upload",
          // 上传的文件列表
          fileList: [],
          //白名单
          whiteList: ["jpg", "jpeg", "bmp", "png", "gif"],
          //文件夹位置
          folderImg: folderImg
        },
        search: {
          searchVisible: true,
          hiddenVisible: false
        },
        materialFolder: {children: [], materialFolder: []},
        choiceList: [],
        breadcrumbList: [],
        form: {
          folderId: 0,
          folderName: ''
        }
      }
    },
    mounted() {
      this.init()
    },
    watch: {
      list(val, oldVal) {//监听imageBox控件是否执行顺序调整
        this.init();
      }
    },
    methods: {
      getImgPreviewUrl(oriUrl){
        //console.log(oriUrl);
        return oriUrl+'.128.jpg';
      },
      /** 初始化方法 */
      init() {
        this.creatChoiceList();
        this.getList();
      },
      creatChoiceList() {
        this.choiceList = [];
        this.imageList = JSON.parse(JSON.stringify(this.list));
        if (this.list != null && this.clear !== true) {
          for (let i = 0; i < this.imageList.length; i++) {
            this.choiceList.push({
              "materialId": this.imageList[i].materialId,
              "materialUrl": this.imageList[i].materialUrl,
              "materialName": this.imageList[i].materialName,
              "materialOriginalName": this.imageList[i].materialOriginalName,
              "materialOriginalUrl": this.imageList[i].materialOriginalUrl,
              "hiddenVisible": false
            });
          }
        }
      },
      /** 查询素材信息列表 */
      getList() {
        listMaterial(this.form).then(response => {
          this.materialFolder = response.data;
          if (this.materialFolder.materialList == null) this.materialFolder.materialList = new Array();
          for (let i = 0; i < this.choiceList.length; i++) {
            for (let j = 0; j < this.materialFolder.materialList.length; j++) {
              if (this.choiceList[i].materialId === this.materialFolder.materialList[j].materialId) {
                this.materialFolder.materialList[j].imageChoice = true
              }
            }
          }
        });
        parentFolder(this.form).then(response => {
          this.breadcrumbList = response.data;
        });
      },
      /** 新建文件夹 */
      handleAddFolder() {
        this.upload.isUploading = true;
        addFolder(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.getList();
          this.upload.isUploading = false;
        });
      },
      /** 搜索内容变动进行查询 */
      searchChange() {
        this.search.searchVisible = this.form.folderName === '';
        this.getList();
      },
      /** true 搜索/false 重置 */
      searchIconClick() {
        if (this.search.searchVisible) {
          this.getList();
        } else {
          this.form.folderName = null;
          this.getList();
          this.search.searchVisible = true;
        }
      },
      breadcrumbJump(item, index) {
        this.form.folderName = null;
        this.form.folderId = item.folderId;
        this.getList()
      },
      imageChoiceClick(item, index) {

        if (this.choiceList.length >= this.max) {
          var last = this.choiceList[this.choiceList.length - 1];
          if(item.materialId!==last.materialId) {
            this.choiceList.splice(this.choiceList.length - 1, 1);
            last.imageChoice = false;

            this.choiceList.push(item);
            item.imageChoice = true;
            return;
          }
        }

        //取消选择
        if (item.imageChoice) {
          for (let i = 0; i < this.choiceList.length; i++) {
            if (this.choiceList[i].materialId === item.materialId) {
              this.choiceList.splice(i, 1);
            }
          }
          item.imageChoice = false;
        }//选择
        else {
          if (this.choiceList.length < this.max) {
            item.hiddenVisible=false;
            this.choiceList.push(item);
            // this.choiceList.push({
            //   "materialId": item.materialId,
            //   "materialNick": item.materialNick,
            //   "materialUrl": item.materialUrl,
            //   "materialOriginalUrl": item.materialOriginalUrl,
            //   "hiddenVisible": false
            // });
            item.imageChoice = true
          }
        }
      },
      imageDeselectClick(item, index) {
        for (let i = 0; i < this.choiceList.length; i++) {
          if (this.choiceList[i].materialId === item.materialId) {
            this.choiceList.splice(i, 1);
          }
        }
        for (let i = 0; i < this.materialFolder.materialList.length; i++) {
          if (this.materialFolder.materialList[i].materialId === item.materialId) {
            this.materialFolder.materialList[i].imageChoice = false
          }
        }
      },
      /** type 0文件夹 1图片 */
      updateMaterialNick(type, item, index) {
        if (type === 0) {
          updateFolder(item).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.getList();
          });
        } else if (type === 1) {
          updateMaterial(item).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.getList();
          });
        }
      },
      /** type 0文件夹 1图片 */
      imageDelete(type, item, index) {
        this.$modal.confirm(type === 0 ? '您确定将该文件夹以及该文件夹内的所有文件放入回收站吗？' : '将文件放入回收站会影响使用该文件的地方，确定放入回收站吗？').then(function () {
          if (type === 0) {
            return delFolder(item.folderId);
          } else if (type === 1) {
            return delMaterial(item.materialId);
          }
        }).then(() => {
          this.getList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /** 上传文件之前 */
      beforeUpload(file) {
        const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
        if (this.upload.whiteList.indexOf(fileSuffix) === -1) {
          this.$message({
            message: '上传文件只能是 jpg, jpeg, bmp, png, gif格式',
            type: 'warning'
          });
          return false;
        }
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 5MB',
            type: 'warning'
          });
          return false;
        }
      },
      /** 文件上传中处理 */
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      /** 文件上传成功处理 */
      handleFileSuccess(response, file, fileList) {
        this.upload.fileList = [];
        this.upload.isUploading = false;
        this.$message({
          message: '上传成功！',
          type: 'success'
        });
        this.getList()
      },
      /** 文件上传失败处理 */
      handleFileError(err, file, fileList) {
        this.upload.fileList = [];
        this.upload.isUploading = false;
        this.$message.error('错了哦，这是一条错误消息');
      },
      /** 确定 */
      onSubmit() {
        this.imageList = []
        for (let i = 0; i < this.choiceList.length; i++) {
          this.imageList.push({
            "materialId": this.choiceList[i].materialId,
            "materialNick": this.choiceList[i].materialNick,
            "materialUrl": this.choiceList[i].materialUrl,
            "materialOriginalUrl": this.choiceList[i].materialOriginalUrl,
            "hiddenVisible": false
          });
        }
        this.$emit('change', JSON.parse(JSON.stringify(this.imageList)));
        this.$emit('update:visible', false);
      },
      /** 关闭 */
      handleClose(done) {
        this.$emit('update:visible', false);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title-text {
    text-align: left;
    height: 10px;

    .title-main {
      font-size: 16px;
      color: #333333;
    }

    .title-supplement {
      font-size: 12px;
      color: #666666;
    }
  }

  .dialogTop {
    top: 9vh;
    left: 22%;
    @media screen and (max-width: 1920px) {
      left: 22%;
    }
    @media screen and (min-width: 1921px) and (max-width: 2560px) {
      left: 30%;
    }
    @media screen and (min-width: 2561px) {
      left: 38%;
    }
    position: fixed;
  }

  .minor-dialogTop {
    top: 9vh;
    left: calc(22% + 960px);
    @media screen and (max-width: 1920px) {
      left: calc(22% + 960px);
    }
    @media screen and (min-width: 1921px) and (max-width: 2560px) {
      left: calc(30% + 960px);
    }
    @media screen and (min-width: 2561px) {
      left: calc(38% + 960px);
    }
    position: fixed;

    .minor-title-text {
      text-align: center;
      height: 10px;

      .minor-increase {
        font-size: 12px;
        color: #000000;
        text-align: center;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      }
    }

    .minor-panel {
      //width: auto;
      border-bottom: 1px solid #E4E7ED;

      .choice-div {
        margin: 10px 38px;

        .choice-image-div {
          width: 70px;
          height: 70px;
          position: relative;

          .choice-image-style {
            width: 70px;
            height: 70px;
            border: 1px solid #E4E7ED;
            background-color: #ffffff;
          }

          .choice-image-border {
            border: 1px solid #5874d8;
          }

          .choice-image-hand {
            cursor: pointer; //鼠标变手
          }

          .choice-image-cancel {
            position: absolute;
            width: 18px;
            height: 18px;
            top: -8px;
            right: -8px;
          }
        }
      }
    }

    .minor-dialog-footer {
      height: 37px;
    }
  }


  .container-header {
    padding-top: 0px;

    .header-search {
      width: 162px;
    }
  }

  .dialogTop-footer {
    text-align: center;

    .dialogTop-footer-button {
      position: relative;
      margin: 0 25px 0 25px;
      top: -10px
    }
  }

  .container-main {

    .div-breadcrumb {
      margin: 6px 0 11px 0;
    }

    .breadcrumb-item {
      color: #557ce1;
    }

    .material-div {
      margin: 10px 40px 20px 0;
    }

    .image-div {
      width: 82px;
      height: 82px;
      position: relative;

      .image-style {
        width: 82px;
        height: 82px;
        border: 1px solid #E4E7ED;
        background-color: #f3f3f3;
      }

      .folder-style {
        width: 82px;
        height: 82px;
      }

      .image-border {
        border: 1px solid #5874d8;
      }

      .image-hand {
        cursor: pointer; //鼠标变手
      }

      .image-choice {
        position: absolute;
        width: 28px;
        height: 28px;
        top: 54px;
        right: 0;
      }

      .folder-cancel {
        position: absolute;
        width: 18px;
        height: 18px;
        top: 0;
        right: -6px;
      }

      .image-cancel {
        position: absolute;
        width: 18px;
        height: 18px;
        top: -8px;
        right: -8px;
      }
    }

    .image-box {
      margin-top: 5px;

      .image-input {
        width: 82px;
        vertical-align: bottom;
      }
    }
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>

<style scoped>
  .image-box >>> .el-input--mini .el-input__inner {
    height: 19px !important;
    line-height: 19px !important;
  }

  .image-box >>> .el-input__inner {
    padding: 0 !important;
    border: 1px solid #ffffff !important;
  }

  .image-box >>> .el-input__inner:focus {
    border-color: #fe714b !important;
  }

  .image-box >>> .el-input__inner:hover {
    border-color: #5874d8 !important;
  }

  .image-box >>> input {
    text-align: center !important;
  }

  .minor-panel >>> .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .dialogTop >>> .el-dialog {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .material >>> .el-tabs__item {
    height: 66px;
    line-height: 66px;
  }

  .minor-dialogTop >>> .el-dialog {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
</style>
